<template>
  <div class="products">
    <BsSubmenu :subMenus="subMenus" />
    <!-- banner -->
    <section class="banner">
      <div class="hd text-center">
        <div class="f20 title">产品与服务</div>
        <div class="mt20 c3">云视频服务，让距离产生美</div>
      </div>
    </section>

    <section class="section-1">
      <div class="section-title f24 text-center">应用服务</div>
      <div class="section-subtitle mt10 mb40 c3 text-center">APPLICATION SERVICE</div>

      <div class="hd">
        <ul class="clearfix tec-list">
          <li class="clearfix">
            <div class="left-text">
              <div class="f20">云培训通用版</div>
              <div class="mt20">云培训通用版云培训通用版云培训通用版云培训通用版云培训通用版云培训通用版云培训通用版云培训通用版云培训通用版</div>
              <div class="mt20 more">
                <router-link to="/products/page1">了解详情</router-link>
              </div>
            </div>
            <div class="right-img">
              <img src="../assets/images/products/WX20190530-221202@2x.png" alt>
            </div>
          </li>
          <li class="clearfix theme-gray">
            <div class="right-img">
              <img src="../assets/images/products/WX20190530-221233@2x.png" alt>
            </div>
            <div class="left-text">
              <div class="f20">云课堂教育局版</div>
              <div class="mt20">云课堂教育局版云课堂教育局版云课堂教育局版云课堂教育局版云课堂教育局版云课堂教育局版云课堂教育局版</div>
              <div class="mt20 more">
                <router-link to="/products/page2" class="gray">了解详情</router-link>
              </div>
            </div>
          </li>
          <li class="clearfix">
            <div class="left-text">
              <div class="f20">云课堂学校版</div>
              <div class="mt20">云课堂学校版云课堂学校版云课堂学校版云课堂学校版云课堂学校版云课堂学校版云课堂学校版云课堂学校版云课堂学校版</div>
              <div class="mt20 more">
                <router-link to="/products/page2" class>了解详情</router-link>
              </div>
            </div>
            <div class="right-img">
              <img src="../assets/images/products/wx42343242.png" alt>
            </div>
          </li>
        </ul>
      </div>
    </section>

    <!-- <BsBuy /> -->
    <!-- <section class="section-2">
      <div class="section-title f24 text-center">AI智能终端</div>
      <div class="section-subtitle text-center mt10 mb40 c3 letter-space">INTILLIGENT TERMENAL</div>
      <div class="hd">
        <ul class="sence-list clearfix">
          <li @click="$router.push('/products/page4')">
            <img src="../assets/images/index/AI智能终端设备.jpg" alt>
            <p class="mt10">KWLAIWO GQ1300</p>
          </li>
          <li  @click="$router.push('/products/page4')">
            <img src="../assets/images/index/AI智能终端设备.jpg" alt>
            <p class="mt10">KWLAIWO GQ1500</p>
          </li>
        </ul>
      </div>
    </section> -->

    <!-- <section class="section-3">
      <div class="section-title f24 text-center">周边设备</div>
      <div class="section-subtitle text-center mt10 mb40 c3 letter-space">INTILLIGENT TERMENAL</div>
      <div class="hd">
        <ul class="sence-list clearfix">
          <li>
            <p class>摄像机</p>
            <img src="../assets/images/products/wx0003.png" alt class="mt20">
          </li>
          <li>
            <p class>全向麦</p>
            <img class="mt20" src="../assets/images/products/wx0000.png" alt>
          </li>
        </ul>
      </div>
    </section> -->
  </div>
</template>

<script>
import BsSubmenu from "@/components/BsSubmenu";
import BsBuy from '@/components/BsBuy'

export default {
  components: { BsSubmenu, BsBuy },
  data() {
    return {
      subMenus: [
        //  {title: '云会议通用版', link:'/products/page1', active: true},
        // {title: '云课堂教育局版', link:'/products/page2', active: false},
        {title: '自主软件', link:'/products', active: true},
        {title: '智能终端', link:'/products/page4', active: false},
        {title: '摄像机', link:'/products/list', active: false},
        {title: '周边设备', link:'/products/page5', active: false},
      ]
    };
  }
};
</script>

<style lang="less" scoped>
.banner {
  color: #fff;
  background: url(../assets/images/products/armchairs-blur-chair-296883.png)
    no-repeat center center;
  height: 210px;
  .hd {
    padding-top: 60px;
    .f20 {
      color: #137ee8;
      font-weight: 800;
    }
    .c3 {
      line-height: 1.5;
    }
  }
}

.section-1 {
  padding: 60px 0;
  .tec-list {
    margin: 20px auto;
    width: 900px;

    li {
      background: #147de5;
      margin-bottom: 40px;
      height: 270px;
      .left-text {
        float: left;
        width: 50%;
        padding: 20px;
        color: #fff;
        line-height: 1.5;
        box-shadow: -10px -10px 0 rgba(0, 0, 240, 0.3);
      }
      &.theme-gray {
        background: #414243;
        .left-text {
          box-shadow: 10px -10px 0 rgba(0, 0, 0, 0.3);
        }
      }
      .more {
        a {
          display: inline-block;
          padding: 6px 30px;
          color: #fff;
          border: 1px solid #fff;
          background: #147de5;
          &.gray {
            background: #414243;
          }
        }
      }
      .right-img {
        float: left;
        width: 50%;
        img {
          width: 100%;
          height: 270px;
        }
      }
    }
  }
}

.section-2 {
  padding: 60px 0;
  background: #ededee;
  .sence-list {
    width: 800px;
    margin: auto;
    li {
      float: left;
      width: 48%;
      margin-right: 2%;
      margin-top: 2%;
      text-align: center;
      img {
        width: 100%;
      }
    }
  }
}
.section-3 {
  padding: 60px 0;
  background: #ffffff;
  .sence-list {
    width: 800px;
    margin: auto;
    background: #f9fafb;
    li {
      float: left;
      width: 48%;
      margin-right: 2%;
      margin-top: 2%;
      text-align: center;
      padding: 20px;
      text-align: center;
      img {
        width: 100%;
      }
    }
  }
}
</style>
